<script setup lang="ts">

import Navigator from "../components/NavigatorRoot.vue";
import HeaderTitle from "../components/HeaderTitle.vue";
import {ref} from "vue";
import router from "../Router";
import {onMounted, reactive} from "vue";
import {deleteTask, getTaskList} from "../network/taskApi.ts";
import {getUserById} from "../network/userApi.ts";
import MapShow from "../components/MapShow.vue";
import TaskMapShow from "../components/TaskMapShow.vue";
import {currentRoleIndex, navigatorDict} from "../utils/UserUtils.ts";
import {cancelWebSocket, returnMessage, webSocketInit, ws} from "../network/webSocket.ts";


function toSelectMap(){
  router.push("/selectMap")
}


function handleCurrentChange(index: number){
  console.log(`current page: ${index}`)
}

let pageSize = ref(5)
let currentPage = ref(1)
let tableData = ref()


onMounted(()=>{
  getTaskTable()
  webSocketInit()
})
const handleModify = (index: number, row) => {
  localStorage.setItem("modifyTaskId",row.id)
  router.push({
    path:"/modifyTaskBase",
  })
}

const handleLoc = (index: number, row) => {
  console.log("returnMessage.value:"+returnMessage.value)
  if(returnMessage.value != ''){
    let currentLoc = JSON.parse(returnMessage.value)
    if(currentLoc.curTaskId == row.id){
      router.push({
        path:'/getSubmitUserLoc',
      })
      alert(currentLoc)
    }else{
      cancelWebSocket();
      alert("该任务的实施者不在调查中")
      webSocketInit()
    }
  }else{
    cancelWebSocket();
    alert("该任务的实施者不在调查中")
    webSocketInit()
  }

  // console.log(!returnMessage.value ? "returnMessage为空":JSON.parse(returnMessage.value).curTaskId)
  // router.push({
  //   path:"/modifyTaskBase",
  // })
}

const handleDelete = (index: number, row) => {
  let taskId = {task_id: row.id}
  deleteTask(taskId).then(res=>{
    console.log(res.data.message)
    alert(res.data.message)
  })
  tableData.value.splice(index, 1)
}

function getTaskTable(){
  let taskPage = reactive({
    "limit": pageSize.value,
    "offset": currentPage.value
  })
  getTaskList(taskPage).then(res=>{
    console.log("getTaskList--data:")
    console.log(res.data.data.records)
    tableData.value = res.data.data.records
    tableData.value.forEach(el=> {
      el.start = el.startTime.substring(0,10)+" "+el.startTime.substring(11,19)
      el.end = el.endTime.substring(0,10)+" "+el.endTime.substring(11,19)
      if(el.status == 0) el.statusName = "0:已发布，等待调查结果"
      if(el.status == 1) el.statusName = "1:审核不成功，被打回"
      if(el.status == 2) el.statusName = "2:已上传调查结果，审核中"
      if(el.status == 3) el.statusName = "3:已完成"
      if(el.status == -1) el.statusName = "4:调查超时判定失败"

      let checkUserTemp = {"id": el.checkUserId}
      getUserById(checkUserTemp).then(res => {
        el.checkUserNickname = res.data.data.nickname
        // console.log("checkUserTemp:")
        // console.log(el.checkUserNickname)
      })
      let submitUserTemp = {"id": el.submitUserId}
      getUserById(submitUserTemp).then(res => {
        el.submitUserNickname = res.data.data.nickname
        // console.log("submitUserTemp:")
        // console.log(el.submitUserNickname)
      })
      let assignUserTemp = {"id": el.assignUserId}
      getUserById(assignUserTemp).then(res => {
        el.assignUserNickname = res.data.data.nickname
        // console.log("assignUserTemp:")
        // console.log(el.assignUserNickname)
      })
    })
  })
}



console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
currentRoleIndex.value = localStorage.getItem("currentRoleIndex") ? localStorage.getItem("currentRoleIndex") : 5
</script>

<template>
  <div class="flex flex-col h-full w-full fixed top-0 right-0  bg-gray-2 gap-2">
    <header-title></header-title>
    <div class="flex grow gap-2">
      <component :is="navigatorDict[currentRoleIndex]" class="w-38"></component>
      <div class="ml-40 bg-white grow h-full flex flex-col">
        <el-scrollbar height="670px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand" label="详情" width="55" align="center">
              <template #default="props">
                <div class="flex justify-start items-start w-full gap-3">
                  <div class="w-135">
                    <el-scrollbar height="300px">
                      <div class="flex justify-start items-start flex-col w-100 ml-30 gap-2">
                        <template v-for="(value, key) in props.row">
                          <el-card style="width: 400px;" shadow="always"
                                   v-if=" key !='photos'
                                  && key !='patch' && key !='resources'
                                  && key !='start' && key !='end'
                                  && key !='mapCode'"
                          >
                            {{key}}:&nbsp;{{value}}
                          </el-card>
                        </template>
                      </div>
                    </el-scrollbar>
                  </div>
                  <img  class="h-300px grow mr-95" v-show="props.row.mapCode !='123'" :src=props.row.mapCode alt="调查区域">
                  <div v-show="props.row.mapCode =='123'" class="flex justify-center items-center text-8 w-100 h-40"><p>未选择调查区域</p></div>
                </div>

              </template>
            </el-table-column>
            <el-table-column type="index" width="50" align="center"/>
            <el-table-column label="任务编号" prop="id" width="130" align="center"/>
            <el-table-column label="名称" prop="title" width="100" align="center"/>
            <el-table-column label="描述" prop="description" width="180" align="center">
              <template #default="scope">
                <el-scrollbar max-height="100px" >
                  <p>{{scope.row.description}}</p>
                </el-scrollbar>
              </template>
            </el-table-column>
            <el-table-column label="调查类型" prop="types" width="60" align="center"/>
            <!--          <el-table-column label="发布人" prop="assignUserNickname" width="100" align="center"/>-->
            <!--          <el-table-column label="调查面积" prop="area" width="100" align="center"/>-->
            <el-table-column label="审核人" prop="checkUserNickname" width="100" align="center"/>
            <el-table-column label="实施人" prop="submitUserNickname" width="100" align="center"/>
            <el-table-column label="开始时间" prop="start" width="110" align="center"/>
<!--            <el-table-column label="结束时间" prop="end" width="110" align="center"/>-->
            <el-table-column label="持续时间" prop="duration" width="100" align="center"/>
            <el-table-column label="状态" prop="statusName" width="80" align="center"/>
            <el-table-column align="center" label="操作" >
              <template #default="scope">
                <el-button
                    size="small"
                    type="primary"
                    @click="handleLoc(scope.$index, scope.row)"
                >
                  查看位置
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    color="#C7E8E1FF"
                    :dark="true"
                    @click="handleModify(scope.$index, scope.row)"
                >
                  修改
                </el-button>
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-scrollbar>
        <div class="bg-white">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :small=false
              :disabled=false
              :background=false
              layout="prev, pager, next, jumper"
              :total="40"
              @current-change="handleCurrentChange"
          />

        </div>
      </div>


    </div>
  </div>
</template>

<style scoped>
</style>